<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'testComboTree.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>
	<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-patch.css"/>
	<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="js/ext/ext-all.js"></script>
  </head>
  <script type="text/javascript">
  Ext.onReady(function(){ 
	  
var data = [{'id' : '134','text' : '134-right','parent_id' : '1','children':[]},{'id' : '135','text' : '135-offline','parent_id' : '1','children':[]},{'id' : '136','text'
 : '136','parent_id' : '1','children':[]},{'id' : '138','text' : '138','parent_id' : '1',
'children':[]},{'id' : '139','text' : 'asindata','parent_id' : '1'
,'children':[]}];
	  
  Ext.QuickTips.init();
        var comboTree = new Ext.form.ComboBox
        ({
            store:new Ext.data.SimpleStore({fields:[],data:[[]]}), 
            editable:false, 
            mode: 'local', 
            triggerAction:'all', 
            frame:true,
            border:true,
            //maxHeight: 300,width:200,
            tpl: '<div id="treePanel" style="height:200px;width:160px;"></div>', //html代码           
            autoWidth:true,
            //autoHeight:true, 
            emptyText:'请选择...',
            renderTo: 'comboxtree',
            resizable:true
        });
        
        var tree = new Ext.tree.TreePanel
        ({ 
            title:"树状结构",
            animate:true,
            titleCollapse:true,
            root:root,
            singleExpand:true,
            iconCls:"icon-tree",
            autoLoad:false,
            allowDomMove:true,
            frame:true,
            collapsible:false,
            collapsed:false,
            collapseFirst:true,
            border:false,
                        listeners:{ 
render:function(tree){ 
tree.el.on('click',function(e){ 
e.stopPropagation(); 
}) 
} 
} 
        });
       var loader=new Ext.tree.TreeLoader({dataUrl:'cityTree.do'});
        var root=new Ext.tree.AsyncTreeNode
        ({
         id:"0", 
         leaf:false,
         loader: loader,
         text:"城市列表",
         expandable:true,
         expanded:true 
     });         
        tree.setRootNode(root);        
        comboTree.on('expand',function(){tree.render('treePanel');});
        var tree_click = function(node,e)
        {
            if(node.attributes.leaf)
            {
                if(node.isLeaf())
                {
                     e.stopEvent();   //非叶子节点则不触发
                      comboTree.setValue(node.text);  //设置option值
                comboTree.collapse();   //隐藏option列表
                //alert(comboTree.getValue());
                }
               
            }
        };
        tree.on("click",tree_click);  
  });
  </script>
  <body>
    This is my JSP page. <br>
    <div id="comboxtree"></div>
  </body>
</html>
